import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './frontHeader.css'
import { Avatar, Menu, Dropdown, Icon, Modal, Tabs, message } from 'antd'
import { _throttle, axiosParams, ERR_OK, ERR_AUTH } from '../../config/util'
import logoPic from './logo.png'
import logo02Pic from './logo02.png'
import axios from '../../config/http'
import LoginForm from '../../component/login/login.jsx'

const TabPane = Tabs.TabPane

class FrontHeader extends React.Component {
  constructor (props) {
    super(props)
    this.login = this.login.bind(this)
    this.register = this.register.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.handleOk = this.handleOk.bind(this)
    this.changeKey = this.changeKey.bind(this)
    this.loginSubmit = this.loginSubmit.bind(this)
    this.logout = this.logout.bind(this)
  }
  state = {
    headerStyle: 'header',
    logo: logoPic,
    visible: false,
    key: '.$1'
  }
  // componentDidMount () {
  //   window.addEventListener('scroll',
  //     _throttle((e) => {
  //       let pageY = window.pageYOffset
  //       this.changeStyle(pageY)
  //     }, 200)
  //   )
  // }
  handleOk = () => {
    // this.setState({ visible: true });
  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  getInfo () {

  }
  login (e) {
    e.preventDefault()
    this.setState({
      visible: true,
      key: '.$1'
    })
  }
  register (e) {
    e.preventDefault()
    this.setState({
      visible: true,
      key: '.$2'
    })
  }
  loginSubmit(obj) {
    const body = axiosParams(obj)
    axios.post('/login', body).then(res => {
      const data = res.data
      if (data.code === ERR_OK) {
        window.localStorage.setItem('token', data.data.token)
        window.localStorage.setItem('username', data.data.username)
        message.success('登录成功')
        this.setState({
          visible: false
        })
      } else {
        message.error('登录失败')
      }
    })
  }
  logout (e) {
    e.preventDefault()
    window.localStorage.setItem('token', '')
    window.localStorage.setItem('username', '')
  }
  changeKey (key) {
    this.setState({
      key
    })
  }
  changeStyle (pageY) {
    if (pageY > 100) {
      this.setState({
        headerStyle: 'header header-white',
        logo: logo02Pic
      })
    } else {
      this.setState({
        headerStyle: 'header',
        logo: logoPic
      })
    }
  }
  render () {
    const menu = (
      <Menu>
        <Menu.Item>
          <a onClick={() => {this.props.history.pushState(null, '/info')}}>个人信息</a>
        </Menu.Item>
        <Menu.Item>
          <a onClick={(e) => {this.logout(e)}}>注销</a>
        </Menu.Item>
      </Menu>
    )
    const {headerStyle, visible, key} = this.state
    const logo = {
      backgroundImage: `url(${this.state.logo})`
    }
    const username = window.localStorage.getItem('username')
    let userShow = null
    if (username) {
      userShow = (
        <div styleName='user-info'>
          <Dropdown overlay={menu}>
            <div>
              <Avatar size='large'>{username[0].toUpperCase()}</Avatar> <Icon type='down' />
            </div>
          </Dropdown>
        </div>
      )
    } else {
      userShow = (
        <div styleName='user-login'>
          <a onClick={(e) => {this.login(e)}}>登录</a>
          <span>|</span>
          <a onClick={(e) => {this.register(e)}}>注册</a>
        </div>
      )
    }
    return (
      <header styleName={headerStyle}>
        <div styleName='logo' style={logo}>
          <a title='共享充电宝' />
        </div>
        <div styleName='user'>
          {userShow}
        </div>
        {/* 弹窗 */}
        <Modal
          visible={visible}
          title=""
          footer={null}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Tabs activeKey={key} tabBarGutter={40} onChange={this.changeKey}>
            <TabPane tab="" key="3"></TabPane>
            <TabPane tab="" key="4"></TabPane>
            <TabPane tab="登录" key="1">
              <LoginForm loginSubmit={this.loginSubmit}></LoginForm>
            </TabPane>
            <TabPane tab="注册" key="2">Content of Tab Pane 2</TabPane>
          </Tabs>
        </Modal>
      </header>
    )
  }
}

export default CSSModules(FrontHeader, styles, {"allowMultiple":true})
